
$(function () {
    topNav.$mount("#nav");
})

let topNav = new Vue({
    //el : '#nav',
    data : {
        originalPsd : '',
        newPsd : '',
        confirmNewPsd : '',
    },
    methods : {
        loginInfoUpdate(){//确认更新，真正的更新方法
            if (this.originalPsd === "" || this.newPsd === "" || this.confirmNewPsd === ""){
                Qmsg.warning("请填写密码",{position:'center',timeout:2000});return false;
            }else {
                if (this.newPsd === this.confirmNewPsd){
                    axios({
                        method : "POST",
                        url:"/modify",
                        params: {
                            originalPsd : this.originalPsd,
                            newPsd : this.newPsd,
                            confirmNewPsd : this.confirmNewPsd,
                        },
                        headers:{
                            'Content-type': 'application/x-www-form-urlencoded'
                        },
                    }).then((response)=>{
                        if (response.data.msg === "修改成功"){
                            Qmsg.success(response.data.msg,{position:'center',timeout:2000});
                            $("#loginInfoModal").modal('hide')
                        }else {
                            Qmsg.info(response.data.msg,{position:'center',timeout:2000});
                        }
                    }).catch(function (error) {
                        Qmsg.info("修改失败",{position:'center'});
                    });
                }else {
                    Qmsg.warning("密码不一致",{position:'center',timeout:2000});return false;
                }
            }
            this.originalPsd = ""
            this.newPsd = ""
            this.confirmNewPsd = ""
        },
    },
    beforeMount (){//页面挂载之前
    },
    mounted () {
        this.$nextTick(function(){
        })
    }
});

/*头像上传*/
$(function () {
    let file = $("#file");
    let avatarSummit = $("#avatarSummit")
    let avatar_wrapper = $(".avatar-wrapper")
    let img,cropper,base64;

    //使用button的click代替file的click
    $("#uploadBtn").click(function () {
        file.prop("accept",".jpg,.jpeg,.png,.bmp")
        file.click()
    })

    //选择图片后触发，使用base64编码该图片并传给候选框
    file.change(function () {
        let suffixArr = ['jpg','jpeg','png','bmp'];
        let name = $(this).val()
        let prefix = name.substring(name.lastIndexOf('\\') + 1);
        let suffix = name.substring(name.lastIndexOf('.') + 1);
        console.log('文件路径:' + prefix);
        console.log('文件名:' + prefix);
        console.log('后缀名:' + suffix);

        if (!suffixArr.includes(suffix)){
            Qmsg.warning("文件类型错误，请重新选择",{position:'center', autoClose:false});
            $('#avatar-modal').modal('hide')
            return false;
        }
        getBase64($(this));//得到该图片的base64数据
        $(this).val("")//清除file内容以便重置change事件监听

    })

    //点击保存时触发，获取待裁剪的图片并上传
    avatarSummit.click(function () {
        getRoundedCanvas();
    })

    /**
     abort/none	中断读取
     readAsBinaryString/file	将文件读取为二进制码
     readAsDataURL/file	将文件读取为 DataURL
     readAsText/file, [encoding]	将文件读取为文本
     */
    function getBase64(element) {
        //获取input[type=file]的文件对象
        let file = element.get(0).files.item(0);
        if (file) {
            //使用流读取文件
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                base64 = e.target.result;
                img = document.createElement("img");
                img.src = base64;
                avatar_wrapper.empty().append(img);
                cropper = new Cropper(img,options)
            };
        }
    }

    function getRoundedCanvas(){
        let sourceCanvas = cropper.getCroppedCanvas({
            width: 128,
            height: 128,
            minWidth: 128,
            minHeight: 128,
            fillColor: '#fff',
            imageSmoothingEnabled: true,
            imageSmoothingQuality: 'high',
        });
        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');

        let width = sourceCanvas.width;
        let height = sourceCanvas.height;
        canvas.width = width;
        canvas.height = height;
        /*                            // 在canvas绘制前填充白色背景
                                    context.fillStyle = "#ffffff";
                                    context.fillRect(0, 0, width, height);*/
        context.imageSmoothingEnabled = true;
        context.drawImage(sourceCanvas, 0, 0);
        context.globalCompositeOperation = 'destination-in';//设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上

        /*                            //绘制圆形图片
                                    context.beginPath();
                                    context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
                                    context.fill();*/

        //创建img标签并添加属性
        let imgElement = document.createElement('img');
        imgElement.className = "img-fluid rounded-circle img-thumbnail";
        imgElement.src = canvas.toDataURL('image/jpeg');

        //生成img添加到头像和二级菜单头像区，使用深度克隆
        $("#avatar").empty().append(imgElement.cloneNode())
        $(".avatar-menu-img").empty().append(imgElement.cloneNode())

        // 通过canvas调用toBlob方法获取blob对象，传入一个回调函数，这个回调函数的参数就是blob对象
        canvas.toBlob(function (blob) {
            /*
             * 构造方法第一个参数必须要用[]包起来，表明这是一个数组
             * 第二个参数是这个文件名
             * 第三个参数是选项，其中通过type指定这个文件的mime值
             */
            let file =  new File([blob], 'a.jpg', {type: 'image/jpg'})

            // ajax上传文件不能像上传普通对象那样，得用上FormData
            let formData = new FormData()
            formData.append("file", file)

            $.ajax({
                type:"POST",
                url:"/file/avatar/",
                data : formData,
                processData: false,    // processData和contentType必须指定为false
                contentType: false,
                cache: false,
                success: (data)=> {
                    console.log(data)
                    if (data.msg === "上传成功"){
                        $('#avatar-modal').modal('hide')
                        Qmsg.success("上传成功",{position:'center'});
                    }
                },
            })
        });
    }

    let options = {
        viewMode:16/9,//定义cropper的视图模式
        aspectRatio: 1,//裁剪框的宽高比
        dragMode:"move",//‘crop’: 可以产生一个新的裁剪框3 ‘move’: 只可以移动3 ‘none’: 什么也不处理
        preview:".preview",
        responsive:true,//—在调整窗口大小的时候重新渲染cropper
        modal:true,//黑色遮罩
        guides:false,//显示在裁剪框上方的虚线。
        autoCropArea:0.7,//定义自动裁剪面积大小(百分比)和图片进行对比。
        movable:true,//是否允许可以移动后面的图片
        rotatable:true,//是否允许旋转图像。
        scalable:true,//是否允许缩放图像。
        zoomable:true,//是否允许放大图像。
        cropBoxResizable:true,//是否通过拖动来调整剪裁框的大小。
        ready : function () {
            //console.log("准备完毕")
        },
    }
})

/*头像二级菜单*/
$(function () {
    let avatar_container = $(".avatar-container");
    let avatar_menu = $(".avatar-menu");

    avatar_container.hoverIntent({
        sensitivity: 6,//滑鼠滑動的敏感度,最少要設定為1
        interval: 100,//滑鼠滑過後要延遲的秒數
        over: function () {//滑鼠滑過要執行的函式
            $(this).addClass("avatar-hover")
            avatar_menu.stop(true,true).fadeIn(400);
        },
        timeout: 0,//滑鼠滑出前要延遲的秒數
        out: function () {}//滑鼠滑出要執行的函式
    });

    avatar_menu.hoverIntent({
        sensitivity: 3,
        interval: 0,
        over: function () {},
        timeout: 200,
        out: function () {
            $(this).stop(true,true).fadeOut(200);
            avatar_container.removeClass("hover")
            console.log("移出了")
        }
    });

    /*退出二级菜单*/
    let cancel = $("#cancel")
    let cancel_menu = $(".cancel-menu");

    cancel.hoverIntent({
        sensitivity: 3,//滑鼠滑動的敏感度,最少要設定為1
        interval: 100,//滑鼠滑過後要延遲的秒數
        over: function () {//滑鼠滑過要執行的函式
            cancel_menu.stop(true,true).fadeIn("slow");
        },
        timeout: 100,//滑鼠滑出前要延遲的秒數
        out: function () {
            cancel_menu.stop(true,true).fadeOut("slow")
        }//滑鼠滑出要執行的函式
    });

})
/*跳转标签控制*/
$(function () {
    let navLink = $(".nav-link:not(.ml-auto .nav-link)");
    let url = window.location.pathname;
    let realUrl,substrUrl;

    //获取地址栏url
    url = url.substring(url.lastIndexOf('/') + 1, url.length);
    //console.log(url);

    navLink.each(function () {
        //获取导航栏href属性url
        realUrl = $(this).prop("href");
        substrUrl = realUrl.substr(realUrl.lastIndexOf('/') + 1)
        if (substrUrl === url){
            $(this).addClass("active").siblings().removeClass("active")
        }
    })
})
